<!-- 马佳乐 看图猜成语关卡管理 -->
<template>
    <div>
        <el-button @click="addPictureIdiom()" type="primary" plain style="margin-left:10px">添加</el-button>
        <el-table :data="PictureIdiomLevelData" stripe style="width: 100%">
            <el-table-column
            prop="id"
            label="关卡">
            </el-table-column>
            <!-- <el-table-column 
            prop="pictureIdiomLevelNum.picture"
            label="成语数量">
            </el-table-column> -->
            <el-table-column
            prop="isAllocation"
            label="上架/下架">
            <!-- 滑块开关 -->
            <template slot-scope="scope">
                <el-switch v-model="scope.row.isAllocation"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                    @change=changliveRoomStatus($event,scope.row)>
                </el-switch>
            </template>
            </el-table-column>
            <el-table-column
            prop="createTime"
            label="添加时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="360">
                <template slot-scope="scope">
                    <!-- <el-button @click="openDetail(scope.row.id)" size="small">详情</el-button> -->
                    <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="openDetail(scope.row.id)"><i class="el-icon-share"></i>详情</span></el-button>
                    <!-- <el-button @click="upUserWindows(scope.row)" type="primary" size="small">编辑</el-button> -->
                    <!-- <el-button @click="updatedelete(scope.row.id)" type="danger" size="small">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalSize">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data () {
        return {
            pictureIdiomLevelNum:[],
            // 关卡全查数据
            PictureIdiomLevelData: [],
            // 分页
            page: {
                totalSize: 0,
                pageNum: 1,
                pageSize: 10
            },
            gid: ""
        }
    },
    mounted () {
        this.getPictureIdiomLevel()
        this.getLevelNum()
    },
    methods: {
        getLevelNum () {
            this.$axios.get('/PictureIdiomLevel/queryLevelNum', {
                params: {
                    id: id
                }
            }).then(res => {
                if (res.data.flag) {
                    this.pictureIdiomLevelNum = res.data.data.content
                    console.log("数据 " + this.pictureIdiomLevelNum);
                }
            })
        },
        // getLevelNum () {
        //     this.$axios.get('/PictureIdiomLevel/queryLevelNum')
        // },
        // 将关卡下架方法
        banneds(id){
        const form = new FormData();
        form.set("id", id);
        this.$axios.post("/PictureIdiomLevel/bannedLevel",form).then((res) => {
            if ((res.data.data.code == 200)) {
              this.Mymessage("success", "下架成功");
              this.updatedisable = false
              this.getPictureIdiomLevel();
            } else {
              this.Mymessage("wanging", "下架失败");
            }
          })
          .catch(() => {
            this.Mymessage("info", "下架有误");
          });
        },
        // 将关卡上架方法
        enables(id){
            const forms = new FormData();
            forms.set("id", id);
            this.$axios.post("/PictureIdiomLevel/enableLevel",forms).then((res) => {
                if ((res.data.data.code == 200)) {
                this.Mymessage("success", "上架成功");
                this.getPictureIdiomLevel();
                } else {
                this.Mymessage("wanging", "上架失败");
                }
            })
            .catch(() => {
                this.Mymessage("info", "上架有误");
            });
        },
        changliveRoomStatus(e,data){
            // console.log(id)
            if(data.isAllocation == 1){
                this.banneds(data.id)
            } else{
                this.enables(data.id)
            }
        },
        // 全查方法
        getPictureIdiomLevel() {
            this.$axios.get('/PictureIdiomLevel/queryPictureIdiomLevel', {
                params: {
                    // 当前页
                    pageNum: this.page.pageNum,
                    // 每页条数
                    pageSize: this.page.pageSize
                }
            }).then(res => {
                if (res.data.flag) {
                    this.PictureIdiomLevelData = res.data.data.content
                    this.page.totalSize = res.data.data.totalSize
                    this.PictureIdiomLevelData.forEach(item => {
                    // this.gid = item.id
                    // item.id = '第' + item.id + '关';
                        // console.log(item.id)
                    })
                } this.loading = false
                // console.log(this.PictureIdiomLevelData);
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        // 分页
        handleSizeChange (val) { 
            this.page.pageSize = val
            this.getPictureIdiomLevel()
        },
        // 分页
        handleCurrentChange (val) { 
            this.page.pageNum = val
            this.getPictureIdiomLevel()
        },
        // 弹窗提示
        Mymessage (type, text) { 
            this.$message({
                showClose: true,
                message: text,
                type: type
            })
        },
        // 添加方法
        addPictureIdiom () {
            this.$axios.post('/PictureIdiomLevel/addPictureIdiomLevel').then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.getPictureIdiomLevel()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            })
        },
        // 跳转关卡详情页方法
        openDetail (id) {
            // debugger
            const params = encodeURIComponent(JSON.stringify(id));
            this.$router.push({ 
                path: '/pictureIdiomLevelDetail',
                 query: { 
                    id: params
                } 
            });
        },
    }
}
</script>